<template>
  <div>
    <el-dialog
        v-model="visible"
        :align-center="true"
        title="导入原始订单数据"
        width="600px"
        @close="handleClose"
    >
      <el-scrollbar max-height="60vh">
        <el-form
            ref="importFormRef"
            label-width="auto"
            :model="importFormData"
            :rules="importFormRules"
        >
          <el-form-item prop="files">
            <el-upload
                ref="uploadRef"
                v-model:file-list="importFormData.files"
                class="w-full"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                :drag="true"
                :limit="10"
                :auto-upload="false"
                :on-exceed="handleFileExceed"
            >
              <el-icon class="el-icon--upload">
                <upload-filled/>
              </el-icon>
              <div class="el-upload__text" style="font-size: 15px;">
                将文件拖到此处，或
                <em style="font-size: 15px;">点击上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip" style="font-size: 15px;color: #217ecc ;">
                  格式为*.xlsx / *.xls，文件不超过10个
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div style="padding-right: var(--el-dialog-padding-primary)">
          <el-button
              type="primary"
              :disabled="importFormData.files.length === 0"
              @click="handleUpload"
              :loading="loading"
          >
            确 定
          </el-button>
          <el-button @click="handleClose">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        width="85%"
        :close-on-click-modal="false"
    >
      <el-form ref="dataFormRef" :model="formData" :rules="rulesOrder" label-width="100px">
        <!--        <el-form-item label="文件名称" prop="fileName">-->
        <!--          <el-input v-model="formData.fileName" clearable maxlength="64" show-word-limit placeholder="文件名称"/>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="备注" prop="remark">-->
        <!--          <el-input v-model="formData.remark" type="textarea" rows="4" maxlength="1024" show-word-limit clearable-->
        <!--                    placeholder="备注"/>-->
        <!--        </el-form-item>-->
        <el-tabs v-model="activeTab" class="left-centered-tabs">
          <el-tab-pane label="触动机构" name="触动机构"></el-tab-pane>
          <el-tab-pane label="触动机构+C" name="触动机构+C"></el-tab-pane>
          <el-tab-pane label="新产品 线" name="新产品 线"></el-tab-pane>
          <el-tab-pane label="新产品" name="新产品"></el-tab-pane>
          <el-tab-pane label="配件" name="配件"></el-tab-pane>
          <el-tab-pane label="扶手" name="扶手"></el-tab-pane>
          <el-tab-pane label="永乐" name="永乐"></el-tab-pane>
          <el-tab-pane label="利居" name="利居"></el-tab-pane>
        </el-tabs>

        <div v-show="activeTab === '触动机构'">
          <el-table :data="formData.cdjgList" border style="width: 100%; margin-top: 20px" height="600px">
            <el-table-column type="index" label="序号" width="70" align="center" fixed="left"/>
            <el-table-column
                key="cgdd"
                label="采购订单"
                prop="cgdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="poxxm"
                label="PO行项目"
                prop="poxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="xsdd"
                label="销售订单"
                prop="xsdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="soxxm"
                label="SO行项目"
                prop="soxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="wl"
                label="物料"
                prop="wl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="ms"
                label="描述"
                prop="ms"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="thbb"
                label="图号/版本"
                prop="thbb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sl"
                label="数量"
                prop="sl"
                min-width="80"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="jhrq"
                label="交货日期"
                prop="jhrq"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kcd"
                label="库存地"
                prop="kcd"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="cw1"
                label="仓位1"
                prop="cw1"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bks"
                label="BKS"
                prop="bks"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="cdjgzd"
                label="触动机构长度"
                prop="cdjgzd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpHqbCar"
                label="GRP_HQB_CAR"
                prop="grpHqbCar"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sldhys"
                label="数量/弹簧颜色"
                prop="sldhys"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bz"
                label="备注"
                prop="bz"
                width="300"
                align="center"
                :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
        <div v-show="activeTab === '触动机构+C'">
          <el-table :data="formData.cdjgCList" border style="width: 100%; margin-top: 20px" height="600px">
            <el-table-column type="index" label="序号" width="70" align="center" fixed="left"/>
            <el-table-column
                key="cgdd"
                label="采购订单"
                prop="cgdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="poxxm"
                label="PO行项目"
                prop="poxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="xsdd"
                label="销售订单"
                prop="xsdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="soxxm"
                label="SO行项目"
                prop="soxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="wl"
                label="物料"
                prop="wl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="ms"
                label="描述"
                prop="ms"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="thbb"
                label="图号/版本"
                prop="thbb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sl"
                label="数量"
                prop="sl"
                min-width="80"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="jhrq"
                label="交货日期"
                prop="jhrq"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kcd"
                label="库存地"
                prop="kcd"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="cw1"
                label="仓位1"
                prop="cw1"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bks"
                label="BKS"
                prop="bks"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="cdjgzd"
                label="触动机构长度"
                prop="cdjgzd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpHqbCar"
                label="GRP_HQB_CAR"
                prop="grpHqbCar"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sldhys"
                label="数量/弹簧颜色"
                prop="sldhys"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bz"
                label="备注"
                prop="bz"
                width="300"
                align="center"
                :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
        <div v-show="activeTab === '新产品 线'">
          <el-table :data="formData.xianList" border style="width: 100%; margin-top: 20px" height="600px" :span-method="objectSpanMethod">

            <el-table-column type="index" label="序号" width="70" align="center" fixed="left"/>
            <el-table-column
                key="cgdd"
                label="采购订单"
                prop="cgdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="poxxm"
                label="PO行项目"
                prop="poxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="xsdd"
                label="销售订单"
                prop="xsdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="soxxm"
                label="SO行项目"
                prop="soxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="wl"
                label="物料"
                prop="wl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="ms"
                label="描述"
                prop="ms"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="thbb"
                label="图号/版本"
                prop="thbb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="zj"
                label="子件"
                prop="zj"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sl"
                label="数量"
                prop="sl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="jhrq"
                label="交货日期"
                prop="jhrq"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kcd"
                label="库存地"
                prop="kcd"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="cw1"
                label="仓位1"
                prop="cw1"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="azszgjhdq"
                label="安装所在国家或地区"
                prop="azszgjhdq"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="carSafetyGearType"
                label="CAR_SAFETY_GEAR_TYPE"
                prop="carSafetyGearType"
                min-width="220"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="hk"
                label="HK"
                prop="hk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bk"
                label="BK"
                prop="bk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tk"
                label="TK"
                prop="tk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpAlarmType"
                label="GRP_ALARM_TYPE"
                prop="grpAlarmType"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="marketCluster"
                label="MARKET_CLUSTER"
                prop="marketCluster"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sckLmsType"
                label="SCK_LMS_TYPE"
                prop="sckLmsType"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="dxlx"
                label="电线类型"
                prop="dxlx"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kgsl"
                label="开关数量"
                prop="kgsl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
<!--            <el-table-column-->
<!--                key="dxsl"-->
<!--                label="电线数量"-->
<!--                prop="dxsl"-->
<!--                min-width="150"-->
<!--                align="center"-->
<!--                :show-overflow-tooltip="true"-->
<!--            />-->
            <el-table-column
                key="dxzd"
                label="电线长度"
                prop="dxzd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="dxjsz"
                label="电线计算值"
                prop="dxjsz"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bz"
                label="备注"
                prop="bz"
                width="300"
                align="center"
                :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
        <div v-show="activeTab === '新产品'">
          <el-table :data="formData.xcpList" border style="width: 100%; margin-top: 20px" height="600px">
            <el-table-column type="index" label="序号" width="70" align="center" fixed="left"/>
            <el-table-column
                key="cgdd"
                label="采购订单"
                prop="cgdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="poxxm"
                label="PO行项目"
                prop="poxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="xsdd"
                label="销售订单"
                prop="xsdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="soxxm"
                label="SO行项目"
                prop="soxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="wl"
                label="物料"
                prop="wl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="ms"
                label="描述"
                prop="ms"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="thbb"
                label="图号/版本"
                prop="thbb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sl"
                label="数量"
                prop="sl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="jhrq"
                label="交货日期"
                prop="jhrq"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kcd"
                label="库存地"
                prop="kcd"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="cw1"
                label="仓位1"
                prop="cw1"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="jgdbz"
                label="激光打标字"
                prop="jgdbz"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bk"
                label="BK"
                prop="bk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tk"
                label="TK"
                prop="tk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="gq"
                label="GQ"
                prop="gq"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="p00Tsd"
                label="P00_TSD"
                prop="p00Tsd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="code"
                label="CODE"
                prop="code"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="p00RetainerType"
                label="P00_RETAINER_TYPE"
                prop="p00RetainerType"
                width="185"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="p00Intercom"
                label="P00_INTERCOM"
                prop="p00Intercom"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="p00ApronType"
                label="P00_APRON_TYPE"
                prop="p00ApronType"
                width="165"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="p00TbType"
                label="P00_TB_TYPE"
                prop="p00TbType"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="p00StructureType"
                label="P00_STRUCTURE_TYPE"
                prop="p00StructureType"
                width="200"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="drivePos"
                label="DRIVE_POS"
                prop="drivePos"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bz"
                label="备注"
                prop="bz"
                width="300"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column fixed="right" label="操作" width="100" align="center">
              <template #default="scope">
                <el-button
                    type="primary"
                    size="small"
                    link
                    @click="handleOpenDialogXcp(scope.row)"
                >
                  <template #icon>
                    <Edit/>
                  </template>
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeTab === '配件'">
          <el-table :data="formData.pjList" border style="width: 100%; margin-top: 20px" height="600px">
            <el-table-column type="index" label="序号" width="70" align="center" fixed="left"/>
            <el-table-column
                key="cgdd"
                label="采购订单"
                prop="cgdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="poxxm"
                label="PO行项目"
                prop="poxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="xsdd"
                label="销售订单"
                prop="xsdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="soxxm"
                label="SO行项目"
                prop="soxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="wl"
                label="物料"
                prop="wl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="ms"
                label="描述"
                prop="ms"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="thbb"
                label="图号/版本"
                prop="thbb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sl"
                label="数量"
                prop="sl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="jhrq"
                label="交货日期"
                prop="jhrq"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kcd"
                label="库存地"
                prop="kcd"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="cw1"
                label="仓位1"
                prop="cw1"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
<!--            <el-table-column-->
<!--                key="azszgjhdq"-->
<!--                label="安装所在国家或地区"-->
<!--                prop="azszgjhdq"-->
<!--                min-width="180"-->
<!--                align="center"-->
<!--                :show-overflow-tooltip="true"-->
<!--            />-->
            <el-table-column
                key="kzu"
                label="KZU"
                prop="kzu"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bks"
                label="BKS"
                prop="bks"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="cdjgzd"
                label="触动机构长度"
                prop="cdjgzd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="elevatorSystem"
                label="ELEVATOR_SYSTEM"
                prop="elevatorSystem"
                min-width="180"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="carSlingVariant"
                label="CAR_SLING_VARIANT"
                prop="carSlingVariant"
                width="185"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="carSafetyGearType"
                label="CAR_SAFETY_GEAR_TYPE"
                prop="carSafetyGearType"
                min-width="220"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="qzgzd"
                label="起重管长度"
                prop="qzgzd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bz"
                label="备注"
                prop="bz"
                width="300"
                align="center"
                :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
        <div v-show="activeTab === '扶手'">
          <el-table :data="formData.fsList" border style="width: 100%; margin-top: 20px" height="600px">
            <el-table-column type="index" label="序号" width="70" align="center" fixed="left"/>
            <el-table-column
                key="cgdd"
                label="采购订单"
                prop="cgdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="poxxm"
                label="PO行项目"
                prop="poxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="xsdd"
                label="销售订单"
                prop="xsdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="soxxm"
                label="SO行项目"
                prop="soxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="wl"
                label="物料"
                prop="wl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="ms"
                label="描述"
                prop="ms"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="thbb"
                label="图号/版本"
                prop="thbb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sl"
                label="数量"
                prop="sl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="jhrq"
                label="交货日期"
                prop="jhrq"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kcd"
                label="库存地"
                prop="kcd"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="cw1"
                label="仓位1"
                prop="cw1"
                min-width="120"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bk"
                label="BK"
                prop="bk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tk"
                label="TK"
                prop="tk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwcLeft"
                label="TKWC_LEFT"
                prop="tkwcLeft"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwoLeft"
                label="TKWO_LEFT"
                prop="tkwoLeft"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwcRight"
                label="TKWC_RIGHT"
                prop="tkwcRight"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwoRight"
                label="TKWO_RIGHT"
                prop="tkwoRight"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpWallBaseTypeLeft"
                label="GRP_WALL_BASE_TYPE_LEFT"
                prop="grpWallBaseTypeLeft"
                min-width="250"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpWallBaseTypeRight"
                label="GRP_WALL_BASE_TYPE_RIGHT"
                prop="grpWallBaseTypeRight"
                min-width="255"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt1"
                label="GRP_COP_TKT1 "
                prop="grpCopTkt1"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt2"
                label="GRP_COP_TKT2"
                prop="grpCopTkt2"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt3"
                label="GRP_COP_TKT3"
                prop="grpCopTkt3"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt4"
                label="GRP_COP_TKT4"
                prop="grpCopTkt4"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kja"
                label="孔距A"
                prop="kja"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kjb"
                label="孔距B"
                prop="kjb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="fszd"
                label="扶手长度(L)"
                prop="fszd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="gdzjsl"
                label="固定支架数量"
                prop="gdzjsl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bmcl"
                label="表面处理"
                prop="bmcl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bz"
                label="备注"
                prop="bz"
                width="300"
                align="center"
                :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
        <div v-show="activeTab === '永乐'">
          <el-table :data="formData.ylList" border style="width: 100%; margin-top: 20px" height="600px">
            <el-table-column type="index" label="序号" width="70" align="center" fixed="left"/>
            <el-table-column
                key="cgdd"
                label="采购订单"
                prop="cgdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="poxxm"
                label="PO行项目"
                prop="poxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="xsdd"
                label="销售订单"
                prop="xsdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="soxxm"
                label="SO行项目"
                prop="soxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="wl"
                label="物料"
                prop="wl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="ms"
                label="描述"
                prop="ms"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="thbb"
                label="图号/版本"
                prop="thbb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sl"
                label="数量"
                prop="sl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="jhrq"
                label="交货日期"
                prop="jhrq"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bk"
                label="BK"
                prop="bk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tk"
                label="TK"
                prop="tk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwcLeft"
                label="TKWC_LEFT"
                prop="tkwcLeft"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwoLeft"
                label="TKWO_LEFT"
                prop="tkwoLeft"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwcRight"
                label="TKWC_RIGHT"
                prop="tkwcRight"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwoRight"
                label="TKWO_RIGHT"
                prop="tkwoRight"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpWallBaseTypeLeft"
                label="GRP_WALL_BASE_TYPE_LEFT"
                prop="grpWallBaseTypeLeft"
                min-width="250"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpWallBaseTypeRight"
                label="GRP_WALL_BASE_TYPE_RIGHT"
                prop="grpWallBaseTypeRight"
                min-width="255"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt1"
                label="GRP_COP_TKT1 "
                prop="grpCopTkt1"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt2"
                label="GRP_COP_TKT2"
                prop="grpCopTkt2"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt3"
                label="GRP_COP_TKT3"
                prop="grpCopTkt3"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt4"
                label="GRP_COP_TKT4"
                prop="grpCopTkt4"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kja"
                label="孔距A"
                prop="kja"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kjb"
                label="孔距B"
                prop="kjb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="fszd"
                label="扶手长度(L)"
                prop="fszd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="gdzjsl"
                label="固定支架数量"
                prop="gdzjsl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bmcl"
                label="表面处理"
                prop="bmcl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bz"
                label="备注"
                prop="bz"
                width="300"
                align="center"
                :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
        <div v-show="activeTab === '利居'">
          <el-table :data="formData.ljList" border style="width: 100%; margin-top: 20px" height="600px">
            <el-table-column type="index" label="序号" width="70" align="center" fixed="left"/>
            <el-table-column
                key="cgdd"
                label="采购订单"
                prop="cgdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="poxxm"
                label="PO行项目"
                prop="poxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="xsdd"
                label="销售订单"
                prop="xsdd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="soxxm"
                label="SO行项目"
                prop="soxxm"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="wl"
                label="物料"
                prop="wl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="ms"
                label="描述"
                prop="ms"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="thbb"
                label="图号/版本"
                prop="thbb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="sl"
                label="数量"
                prop="sl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="jhrq"
                label="交货日期"
                prop="jhrq"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bk"
                label="BK"
                prop="bk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tk"
                label="TK"
                prop="tk"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwcLeft"
                label="TKWC_LEFT"
                prop="tkwcLeft"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwoLeft"
                label="TKWO_LEFT"
                prop="tkwoLeft"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwcRight"
                label="TKWC_RIGHT"
                prop="tkwcRight"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="tkwoRight"
                label="TKWO_RIGHT"
                prop="tkwoRight"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpWallBaseTypeLeft"
                label="GRP_WALL_BASE_TYPE_LEFT"
                prop="grpWallBaseTypeLeft"
                min-width="250"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpWallBaseTypeRight"
                label="GRP_WALL_BASE_TYPE_RIGHT"
                prop="grpWallBaseTypeRight"
                min-width="255"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt1"
                label="GRP_COP_TKT1 "
                prop="grpCopTkt1"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt2"
                label="GRP_COP_TKT2"
                prop="grpCopTkt2"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt3"
                label="GRP_COP_TKT3"
                prop="grpCopTkt3"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="grpCopTkt4"
                label="GRP_COP_TKT4"
                prop="grpCopTkt4"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kja"
                label="孔距A"
                prop="kja"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="kjb"
                label="孔距B"
                prop="kjb"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="fszd"
                label="扶手长度(L)"
                prop="fszd"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="gdzjsl"
                label="固定支架数量"
                prop="gdzjsl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bmcl"
                label="表面处理"
                prop="bmcl"
                min-width="150"
                align="center"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                key="bz"
                label="备注"
                prop="bz"
                width="300"
                align="center"
                :show-overflow-tooltip="true"
            />
          </el-table>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :disabled="loading" @click="handleSubmitOrder()">提交</el-button>
          <el-button @click="handleCloseDialog()">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新产品表单弹窗 -->
    <el-dialog
        v-model="dialogXcp.visible"
        :title="dialogXcp.title"
        width="500px"
        @close="handleCloseDialogXcp"
        :close-on-click-modal="false"
    >
      <el-form ref="dataFormRefXcp" :model="formDataXcp" label-width="100px">
        <el-form-item label="激光打标字" prop="jgdbz">
          <el-input
              v-model="formDataXcp.jgdbz"
              placeholder="激光打标字"
              maxlength="64"
              show-word-limit
              clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmitXcp()">确定</el-button>
          <el-button @click="handleCloseDialogXcp()">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {ElMessage, TableColumnCtx, type UploadUserFile} from "element-plus";
import LpsOrderAPI, {LpsOrderImportExcelResultVO} from "@/api/system/lps-order";
import {LpsOrderXcpForm} from "@/api/system/lps-order-xcp";
import {LpsOrderXianPageVO} from "@/api/system/lps-order-xian";
import {F} from "vite/dist/node/moduleRunnerTransport.d-DJ_mE5sf";

const emit = defineEmits<{
  (e: 'reset-query'): void
}>()

const visible = defineModel("modelValue", {
  type: Boolean,
  required: true,
  default: false,
});

const rules = reactive({});
const dataFormRef = ref(ElForm);
const dataFormRefXcp = ref(ElForm);
const activeTab = ref("触动机构");
const loading = ref(false);
// 弹窗
const dialog = reactive({
  title: "莱普森订单",
  visible: false,
});

// 弹窗
const dialogOrder = reactive({
  title: "莱普森订单",
  visible: false,
});
// 新产品弹窗
const dialogXcp = reactive({
  title: "",
  visible: false,
});

// 莱普森订单表单数据
const formData = reactive<LpsOrderImportExcelResultVO>({});
// 新产品表单数据
const formDataXcp = reactive<LpsOrderXcpForm>({});
const resultVisible = ref(false);
const resultData = ref<string[]>([]);
const invalidCount = ref(0);
const validCount = ref(0);

const importFormRef = ref(null);
const uploadRef = ref(null);

const importFormData = reactive<{
  files: UploadUserFile[];
}>({
  files: [],
});

if (watch) {
  watch(visible, (newValue) => {
    if (newValue) {
      resultData.value = [];
      resultVisible.value = false;
      invalidCount.value = 0;
      validCount.value = 0;
    }
  });
}

const importFormRules = {
  files: [{required: true, message: "文件不能为空", trigger: "blur"}],
};

const rulesOrder = reactive({
  fileName: [
    {required: true, message: '文件名不能为空', trigger: 'blur'}
  ]
});

// 文件超出个数限制
const handleFileExceed = () => {
  ElMessage.warning("最多只能上传10个文件");
};

// 上传文件
const handleUpload = async () => {
  if (!importFormData.files.length) {
    ElMessage.warning("请选择文件");
    return;
  }

  try {
    loading.value = true; // 开始加载状态
    const files = importFormData.files.map(f => f.raw as File); // 获取所有原始文件
    const result = await LpsOrderAPI.import(1, files); // 传递多个文件
    if (result) {
      console.log(result)
      formData.cdjgList = result.cdjgList;
      formData.cdjgCList = result.cdjgCList;
      formData.pjList = result.pjList;
      formData.xcpList = result.xcpList;
      formData.xianList = result.xianList;
      formData.ylList = result.ylList;
      formData.ljList = result.ljList;
      formData.fsList = result.fsList;
      ElMessage.success("订单解析成功");
      handleClose();
      dialog.visible = true;
    } else {
      ElNotification({
        title: "导入失败",
        message: '请联系开发人员',
        position: "bottom-right",
        type: "error",
      });
    }
    // eslint-disable-next-line no-unused-vars
  } catch (error: any) {
    //ElMessage.error("上传失败");
  }finally {
    loading.value = false; // 无论成功或失败都取消加载状态
  }
};

// 关闭弹窗
const handleClose = () => {
  importFormData.files.length = 0;
  visible.value = false;
};

function handleCloseDialog() {
  dialog.visible = false;
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();
  formData.id = undefined;
  emit('reset-query') // 触发 reset-query 事件
}

/** 提交表单 */
function handleSubmitOrder() {
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      const id = formData.id;
      if (id) {
        LpsOrderAPI.update(id, formData)
            .then(() => {
              ElMessage.success("修改成功");
              handleCloseDialog();
            })
            .finally(() => (loading.value = false));
      } else {
        LpsOrderAPI.add(formData)
            .then(() => {
              ElMessage.success("提交成功");
              handleCloseDialog();
            })
            .finally(() => (loading.value = false));
      }
    }
  });
}

/** 打开新产品弹窗 */
function handleOpenDialogXcp(row: any) {
  dialogXcp.visible = true;
  dialogXcp.title = "新产品";
  Object.assign(formDataXcp, row);
}

/** 关闭新产品弹窗 */
function handleCloseDialogXcp() {
  dialogXcp.visible = false;
  dataFormRefXcp.value.resetFields();
  dataFormRefXcp.value.clearValidate();
}

/** 提交新产品弹窗 */
function handleSubmitXcp() {
  const index = formData.xcpList.findIndex(
      (item) => item.id === formDataXcp.id
  );
  if (index > -1) {
    Object.assign(formData.xcpList[index], formDataXcp);
  }
  handleCloseDialogXcp();
}

interface SpanMethodProps {
  row: LpsOrderXianPageVO
  column: TableColumnCtx<LpsOrderXianPageVO>
  rowIndex: number
  columnIndex: number
}

const objectSpanMethod = ({
                            row,
                            column,
                            rowIndex,
                            columnIndex,
                          }: SpanMethodProps) => {
  const mergeColumns = [1, 2, 3, 4, 5, 6, 7];

  // 如果不是合并列，直接返回默认值
  if (!mergeColumns.includes(columnIndex)) {
    return {rowspan: 1, colspan: 1};
  }

  // 获取当前列对应的字段名
  const field = column.property as keyof LpsOrderXianPageVO;

  // 如果是第一行，或当前行的 wl 与上一行不同，开始合并
  if (rowIndex === 0 || row.rowId !== formData.xianList[rowIndex - 1].rowId) {
    let count = 1;
    // 向下查找相同物料的行数
    for (let i = rowIndex + 1; i < formData.xianList.length; i++) {
      if (formData.xianList[i].rowId === row.rowId) {
        count++;
      } else {
        break;
      }
    }
    return {rowspan: count, colspan: 1};
  }
  // 其他行不显示
  return {rowspan: 0, colspan: 0};
};

function handleOpenDialog(id?: number) {
  dialogOrder.visible = true;
  if (id) {
    // dialog.title = "订单数据";
    // LpsOrderCdjgCAPI.getFormData(id).then((data) => {
    //   Object.assign(formData, data);
    // });
  } else {
    dialogOrder.title = "订单数据";
  }
}

</script>

<style scoped>
:deep(.el-input-number .el-input__inner) {
  text-align: left !important;
}

:deep(.el-popper) {
  max-width: 500px;
}
</style>
